import _ from 'lodash';
import printMe from './print';
import './style.css';

function component() {
    let element = document.createElement('div');
    let btn = document.createElement('button');

    // lodash（目前通过一个 script 引入）对于执行这一行是必需的
    // 这是因为 index.js 并未显式声明它需要 lodash，只是假定推测已经存在一个全局变量 _。
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = printMe;

    element.appendChild(btn);

    return element;
  }
  
  let element = component(); // Store the element to re-render on print.js changes
  document.body.appendChild(element);

  if (module.hot) {
    module.hot.accept('./print.js', function() {
      console.log('Accepting the updated printMe module!');
      printMe();
      document.body.removeChild(element);
      element = component(); // Re-render the "component" to update the click handler
      element = component(); // Re-render the "component" to update the click handler
      document.body.appendChild(element);
    })
  }
